/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx,vue}"],
  theme: {
    colors: {
      'primary': 'rgba(var(--color-primary), <alpha-value>)',
      'success': 'rgba(var(--color-success), <alpha-value>)',
      'warning': 'rgba(var(--color-warning), <alpha-value>)',
      'danger': 'rgba(var(--color-danger), <alpha-value>)',
      'info': 'rgba(var(--color-info), <alpha-value>)',
    },
    textColor: ({ theme }) => ({
      'title': 'rgba(var(--color-text-primary), <alpha-value>)',
      'regular': 'rgba(var(--color-text-regular), <alpha-value>)',
      'secondary': 'rgba(var(--color-text-secondary), <alpha-value>)',
      'placeholder': 'rgba(var(--color-text-placeholder), <alpha-value>)',
      'disabled': 'rgba(var(--color-text-disabled), <alpha-value>)',
      'white': 'rgba(var(--color-text-white), <alpha-value>)',
      ...theme('colors')
    }),
    borderColor: ({ theme }) => ({
      'darker': 'rgba(var(--color-border-darker), <alpha-value>)',
      'dark': 'rgba(var(--color-border-dark), <alpha-value>)',
      'base': 'rgba(var(--color-border-base), <alpha-value>)',
      'light': 'rgba(var(--color-border-light), <alpha-value>)',
      'lighter': 'rgba(var(--color-border-lighter), <alpha-value>)',
      ...theme('colors')
    }),
    backgroundColor: ({ theme }) => ({
      'base': 'rgba(var(--color-bg-base), <alpha-value>)',
      'page': 'rgba(var(--color-bg-page), <alpha-value>)',
      ...theme('colors')
    }),
    extend: {
      width: {
        'main': 'calc(100vw - 48px)',
      },
      height: {
        'main': 'calc(100vh - 48px)'
      }
    },
  },
  plugins: [],
}
